<template>
  <div class="gateway">
    <device-header :info="HeadObj"></device-header>

    <div class="query">
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="handleChangeTab"
      >
        <el-tab-pane label="所有设备" name="all"> </el-tab-pane>
        <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
        <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
        <div class="menu">
          <div class="shebei-con">
            <div class="statu">
              <span>在线状态：</span>
              <el-select
                v-model="query.online"
                placeholder="全部"
                class="statu-all"
              >
                <el-option
                  v-for="item in statuData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="EUI-input">
              <span>EUI：</span>
              <el-input
                placeholder="请输入内容"
                v-model="query.eui"
                clearable
                class="input-con"
              >
              </el-input>
            </div>
            <div class="band-time">
              <span>绑定时间：</span>
              <el-date-picker
                value-format="timestamp"
                v-model="query.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="data_time"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="short_btn">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-search el-icon-left"
                @click="searchData"
              >
                搜索</el-button
              >
              <el-button type="primary" @click="clearData">
                <i class="el-icon-delete el-icon--left"></i>
                清除条件</el-button
              >
              <el-button type="primary" @click="refreshData">
                <i class="el-icon-refresh el-icon--left"></i>
                刷新</el-button
              >
            </el-button-group>
            <span
              >搜索结果：<span>{{ total }}</span></span
            >
          </div>
        </div>
      </el-tabs>
    </div>

    <div class="tabulation">
      <el-table :data="gatewayData" style="width: 100%">
        <el-table-column type="index" label="" width="80">
        </el-table-column>
        <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
        <el-table-column prop="name" label="设备名称" width="180">
        </el-table-column>
        <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
        <el-table-column label="在线状态">
          <template slot-scope="scope">
            {{ scope.row.online | onlineType }}
          </template>
        </el-table-column>
        <el-table-column prop="country" label="国家"> </el-table-column>
        <el-table-column prop="agreement" label="组网协议类型">
        </el-table-column>
        <el-table-column label="绑定时间">
          <template slot-scope="scope">
            {{ scope.row.bTime | toTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="sel">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { $gatewayList } from '@/api/index.js'
import DeviceHeader from '../../components/DeviceHeader.vue'
export default {
  data () {
    return {
      HeadObj: {
        type: '设备',
        text: '网关列表',
        content:
          '展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。'
      },
      statuData: [
        { value: 'true', label: '在线' },
        { value: 'false', label: '离线' }
      ],
      statu: '',
      input_con: '',
      band_time: '',
      gatewayData: [],
      activeName: 'all',
      query: {
        // 查询和传给后台的数据
        currPage: 1, // 当前页
        pageSize: 5, // 显示条数
        eui: '', // 设备eui
        online: '', // 是否在线
        agreement: 'all', // 协议类型
        date: '' // 日期
      },
      total: 0
    }
  },
  components: { DeviceHeader },
  name: 'gateway',
  computed: {
    dateStr () {
      if (this.query.date) {
        const d1 = this.query.date[0]
        const d2 = this.query.date[1]
        return d1 + '-' + d2
      } else {
        return ''
      }
    }
  },
  filters: {
    // 在线状态过滤
    onlineType (val) {
      return val ? '在线' : '离线'
    },
    toTime (val) {
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      const time = new Date(Number(val))
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hour = time.getHours()
      const min = time.getMinutes()
      const sec = time.getSeconds()
      return (
        year +
        '-' +
        addZero(month) +
        '-' +
        addZero(day) +
        '  ' +
        addZero(hour) +
        ':' +
        addZero(min) +
        ':' +
        addZero(sec)
      )
    }
  },
  mounted () {
    this.getGatewaylist()
  },
  methods: {
    // 切换tag栏
    handleChangeTab (value) {
      console.log(value)
      this.query.agreement = value.name
      this.getGatewaylist()
    },
    getGatewaylist () {
      // 搜索数据重新赋值
      var queryStr = { ...this.query }
      if (this.dateStr != '') {
        queryStr.date = this.dateStr
      }

      // 将this.query传给后台
      $gatewayList(queryStr).then((res) => {
        this.gatewayData = res.data.data
        console.log(this.gatewayData)

        // 总数量
        this.total = res.data.total
      })
    },
    searchData () {
      // 解决bug:搜索第一页有数据，但再搜索第二页就搜不到，
      this.query.currPage = 1
      // 重新获取数据
      this.getGatewaylist()
    },
    clearData () {
      this.query = {
        // 查询和传给后台的数据
        currPage: 1, // 当前页
        pageSize: 5, // 显示条数
        eui: '', // 设备eui
        online: '', // 是否在线
        agreement: 'all', // 协议类型
        date: '' // 日期
      }
      this.getGatewaylist()
    },
    refreshData () {
      this.$router.go(0)
    },
    handleSizeChange (num) {
      console.log('每页条数：' + num)
      this.query.pageSize = num
      this.query.currPage = 1
      // 重新获取数据
      this.getGatewaylist()
    },
    handleCurrentChange (num) {
      console.log('当前页：' + num)
      this.query.currPage = num
      // 重新获取数据
      this.getGatewaylist()
    }
  }
}
</script>

<style scoped lang="less">
.query {
  margin-bottom: 10px;
  .menu {
    .shebei-con {
      margin-left: 60px;
      .statu {
        .statu-all {
          width: 300px;
        }
      }
      .EUI-input {
        margin-top: 10px;
        span {
          margin-left: 39px;
        }
        .input-con {
          width: 300px;
        }
      }
      .band-time {
        margin-top: 10px;
      }
    }
    .short_btn {
      margin-top: 10px;
      margin-bottom: 15px;
      span {
        margin-left: 10px;
      }
    }
  }
}
.sel {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  margin-bottom: 200px;
}
</style>
